<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/blogs/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/blogs/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blogs/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/blogs/images/apple-touch-icon.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/blogs/images/favicon-32x32.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/blogs/images/favicon-16x16.png?v=5.1.3">


  <link rel="mask-icon" href="/blogs/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta property="og:type" content="website">
<meta property="og:title" content="Chao&#39;s blog">
<meta property="og:url" content="https://louchaoyy.gitee.io/blogs/page/3/index.html">
<meta property="og:site_name" content="Chao&#39;s blog">
<meta property="og:locale">
<meta property="article:author" content="Chaoyxy">
<meta name="twitter:card" content="summary">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '',
    scheme: 'Gemini',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://louchaoyy.gitee.io/blogs/page/3/"/>





  <title>Chao's blog</title>
  








<meta name="generator" content="Hexo 5.4.0"></head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blogs/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Chao's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blogs/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/blogs/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blogs/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/04/28/Express%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/04/28/Express%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/" itemprop="url">Express身份认证</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-04-28T19:05:33+08:00">
                2022-04-28
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/04/28/Express%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/04/28/Express身份认证/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Express身份认证"><a href="#Express身份认证" class="headerlink" title="Express身份认证"></a>Express身份认证</h1><h2 id="1-身份认证"><a href="#1-身份认证" class="headerlink" title="1.身份认证"></a>1.身份认证</h2><ul>
<li>什么是身份认证？</li>
</ul>
<p>身份认证（Authentication）又称“身份验证”、”鉴权“，是指通过一定的手段，完成对用户的身份确认</p>
<ul>
<li>为什么需要身份认证？</li>
</ul>
<p>身份认证的目的是为了确认当前所声称为某种身份的用户，确实是所声称的用户。比如去快递是，我们需要证明这份快递是我们的，要么通过取货码，要么通过手机尾号来进行身份验证。</p>
<ul>
<li>不同种类的身份认证</li>
</ul>
<p>服务端渲染的开发模式推荐使用**<code>session</code>**认证机制</p>
<p>前后端分离的开发模式推荐使用**<code>JWT</code>**认证机制</p>
<h2 id="2-Session认证机制"><a href="#2-Session认证机制" class="headerlink" title="2.Session认证机制"></a>2.Session认证机制</h2><ul>
<li>由于HTTP协议的是无状态的</li>
</ul>
<p>就是说客户端<strong>每次的HTTP请求都是独立的</strong>，连续多个请求之间没有直接的关系。<strong>服务器不会主动保留每次HTTP请求的状态。</strong>示意图如下：</p>
<img src="/blogs/2022/04/28/Express%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/pic1.png" class title="HTTP无状态的示意图">

<ul>
<li>超市收银员为了记住你是会员，她通过会员卡的形式，以后你购物只需要出示会员卡，就能证明你是会员了。</li>
</ul>
<p>使用会员卡认证身份的方式，在WEB开发中专业术语叫<strong>Cookie</strong></p>
<ul>
<li>什么是cookie？</li>
</ul>
<p>Cookie是存储在用户浏览器中的一段不超过4KB的字符串，它由一个名称Name和一个值Value和其他几个用于控制Cookie的有效期，安全性，使用范围的可选属性组成。</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/04/28/Express%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/04/25/express%E4%B9%8B%E4%B8%AD%E9%97%B4%E4%BB%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/04/25/express%E4%B9%8B%E4%B8%AD%E9%97%B4%E4%BB%B6/" itemprop="url">express之中间件</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-04-25T22:39:09+08:00">
                2022-04-25
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/04/25/express%E4%B9%8B%E4%B8%AD%E9%97%B4%E4%BB%B6/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/04/25/express之中间件/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Express之中间件（笔记）"><a href="#Express之中间件（笔记）" class="headerlink" title="Express之中间件（笔记）"></a>Express之中间件（笔记）</h1><p>中间件有什么用？</p>
<ul>
<li>中间件用于业务流程的中间处理环节</li>
<li>中间件必须具备<strong>输入</strong>和<strong>输出</strong>，上一级的输出作为下一级的输入</li>
</ul>
<h2 id="1-Express中间件的调用流程"><a href="#1-Express中间件的调用流程" class="headerlink" title="1.Express中间件的调用流程"></a>1.Express中间件的调用流程</h2><p>当一个请求到达Express的服务器之后，可以连续调用多个中间件，从而对这次请求进行<strong>预处理</strong>（中间件的作用）。</p>
<p>流程如下：</p>
<img src="/blogs/2022/04/25/express%E4%B9%8B%E4%B8%AD%E9%97%B4%E4%BB%B6/middleware.png" class title="中间件的流程图">

<p>中间件处理完成之后，再交给路由，然后响应到客户端</p>
<h2 id="2-Express中间件的格式"><a href="#2-Express中间件的格式" class="headerlink" title="2.Express中间件的格式"></a>2.Express中间件的格式</h2><p>Express的中间件，本质上就是一个<strong>function处理函数</strong>，Express中间件的格式如下：</p>
<img src="/blogs/2022/04/25/express%E4%B9%8B%E4%B8%AD%E9%97%B4%E4%BB%B6/middleware_1.png" class title="中间件的格式">

<p>中间件处理函数，第一部分是请求方式，第二个是路由，第三部分是一个回调函数（具备三个参数，第一个请求参数，第二个响应参数，第三个是next参数）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 中间件处理函数</span></span><br><span class="line">app.get(<span class="string">&#x27;/getInfo&#x27;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    next();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>区别：路由的处理函数中参数只有req,res，中间件的处理函数参数req,res,next，<strong>且next是必须的</strong>。</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/04/25/express%E4%B9%8B%E4%B8%AD%E9%97%B4%E4%BB%B6/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/04/25/express%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E8%B7%AF%E7%94%B1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/04/25/express%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E8%B7%AF%E7%94%B1/" itemprop="url">express的模块化路由</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-04-25T20:19:33+08:00">
                2022-04-25
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/04/25/express%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E8%B7%AF%E7%94%B1/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/04/25/express的模块化路由/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Express中的路由模块化与静态资源托管"><a href="#Express中的路由模块化与静态资源托管" class="headerlink" title="Express中的路由模块化与静态资源托管"></a>Express中的路由模块化与静态资源托管</h1><p>使用<code>nodemon</code>来启动一个js文件</p>
<p>好处：每次改变保存文件，自动把已启动的文件更新（停止再重启），省略了用node app.js反复的Ctrl+C停止再重启的步骤</p>
<p>全局安装：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install nodemon -g</span><br></pre></td></tr></table></figure>

<p>为什么要使使路由模块化？</p>
<ol>
<li>方便管理，降低耦合</li>
<li>太多的路由挂载，导致主文件体积庞大，不利于维护</li>
</ol>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/04/25/express%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E8%B7%AF%E7%94%B1/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/04/23/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%97%B6%E9%97%B4%E9%80%89%E6%8B%A9%E5%99%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/04/23/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%97%B6%E9%97%B4%E9%80%89%E6%8B%A9%E5%99%A8/" itemprop="url">WXminiProgram时间选择器</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-04-23T00:25:13+08:00">
                2022-04-23
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/04/23/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%97%B6%E9%97%B4%E9%80%89%E6%8B%A9%E5%99%A8/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/04/23/微信小程序时间选择器/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="自定义时间日期选择器"><a href="#自定义时间日期选择器" class="headerlink" title="自定义时间日期选择器"></a>自定义时间日期选择器</h1><h2 id="1-布局文件"><a href="#1-布局文件" class="headerlink" title="1.布局文件"></a>1.布局文件</h2><p>在.wxml中</p>


<h2 id="2-在逻辑层"><a href="#2-在逻辑层" class="headerlink" title="2.在逻辑层"></a>2.在逻辑层</h2>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/04/23/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%97%B6%E9%97%B4%E9%80%89%E6%8B%A9%E5%99%A8/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/29/Android%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E4%B9%8B%E7%8E%AF%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/03/29/Android%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E4%B9%8B%E7%8E%AF%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1/" itemprop="url">Android自定义控件之环形进度条</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-29T21:48:28+08:00">
                2022-03-29
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/29/Android%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E4%B9%8B%E7%8E%AF%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/29/Android自定义控件之环形进度条/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="1-为什么要学习自定义控件？"><a href="#1-为什么要学习自定义控件？" class="headerlink" title="1.为什么要学习自定义控件？"></a>1.为什么要学习自定义控件？</h2><ul>
<li><p>我们都知道，安卓官方提供了很多控件，我们可以自由的畅所欲为的使用这些控件去丰富我们的安卓程序，但是有时候，我们遇到一些奇怪的需求的时候，安卓官方提供的控件不满足我们的要求，怎么办？</p>
<p>这时候，我们就需要自定义控件，既然你没有没那我就自己做一个，这样不就好了吗？</p>
<p>说干就干，<strong>let’s do it</strong></p>
</li>
</ul>
<h2 id="2-学习自定义控件需要会什么？"><a href="#2-学习自定义控件需要会什么？" class="headerlink" title="2.学习自定义控件需要会什么？"></a>2.学习自定义控件需要会什么？</h2><ol>
<li>需要会使用drawable资源等</li>
<li>需要会正常使用Java或者kotlin开发安卓</li>
<li>需要会使用canvas画布对需要的控件进行绘制</li>
<li>需要会使用动画（逐帧动画，补间动画，属性动画等）</li>
</ol>
<h2 id="3-需求描述"><a href="#3-需求描述" class="headerlink" title="3.需求描述"></a>3.需求描述</h2><ul>
<li><p>需要做一个环状的进度条，根据不同的进度显示所占的百分比，要求环状图可以自定义设置一些属性，比如大小，颜色以及文本等</p></li></ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/03/29/Android%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E4%B9%8B%E7%8E%AF%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/" itemprop="url">vue双向数据绑定原理解析(源代码在文章末尾)</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-18T20:27:24+08:00">
                2022-03-18
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/18/vue双向数据绑定原理解析/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="1-双向数据绑定-前置技术点"><a href="#1-双向数据绑定-前置技术点" class="headerlink" title="1.双向数据绑定-前置技术点"></a>1.双向数据绑定-前置技术点</h2><ul>
<li>需要实现的vue双向数据绑定，需要使用到一下三种技术<ol>
<li>数组的reduce()方法<ul>
<li>进行数值的累加计算</li>
<li>链式获取对象的属性值</li>
</ul>
</li>
<li>发布-订阅者模式<ul>
<li>Dep类：负责进行<strong>依赖收集</strong></li>
<li>Watcher类：负责<strong>订阅一些事件</strong></li>
</ul>
</li>
<li>使用Object.defineProperty()进行数据劫持<ul>
<li>通过get()劫持<strong>取值操作</strong></li>
<li>通过set()劫持<strong>赋值操作</strong></li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="1-数组的reduce-方法"><a href="#1-数组的reduce-方法" class="headerlink" title="1.数组的reduce()方法"></a>1.数组的reduce()方法</h3><ul>
<li><p>对于如下一个数组，如果需要进行累加操作，有多种方法可以实现</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr = [3,5,6,7,21,55,34]</span><br></pre></td></tr></table></figure></li></ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/17/%E6%89%8B%E6%92%95vue%E4%B9%8B%E5%AF%B9%E4%BA%8B%E4%BB%B6%E6%8C%82%E8%BD%BD%E5%92%8C%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/03/17/%E6%89%8B%E6%92%95vue%E4%B9%8B%E5%AF%B9%E4%BA%8B%E4%BB%B6%E6%8C%82%E8%BD%BD%E5%92%8C%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3/" itemprop="url">手撕vue之对事件挂载原理详解</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-17T18:55:43+08:00">
                2022-03-17
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/17/%E6%89%8B%E6%92%95vue%E4%B9%8B%E5%AF%B9%E4%BA%8B%E4%BB%B6%E6%8C%82%E8%BD%BD%E5%92%8C%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/17/手撕vue之对事件挂载和双向绑定原理详解/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="写在前面"><a href="#写在前面" class="headerlink" title="写在前面"></a>写在前面</h2><h3 id="阅读了本文？你能了解到什么？"><a href="#阅读了本文？你能了解到什么？" class="headerlink" title="阅读了本文？你能了解到什么？"></a>阅读了本文？你能了解到什么？</h3><ul>
<li>vue是如何被创建的？</li>
<li>vue是如何处理数据的？</li>
<li>vue是如何感知事件和处理事件的？</li>
<li>为后续了解双向绑定大侠基础</li>
</ul>
<h2 id="1-Vue页面构成？"><a href="#1-Vue页面构成？" class="headerlink" title="1.Vue页面构成？"></a>1.Vue页面构成？</h2><ul>
<li><p>首先，我们都知道Vue其实更准确来说，他是一个库，在Vue中，vue规定了很多方法，也有很多写法，大大的简化了我们在WEB网页中对DOM元素的复杂的操作。极大的提升了开发效率。我们首先来看一个Vue的页面结构。</p>
<ol>
<li><p>对于一个Vue单文件组件来说，他主要有三部分构成</p>
<ul>
<li><p>template部分，这里主要用于页面的渲染，对应于文档部分</p>
<p><template></template></p>
</li>
<li><p>script部分，这里写<strong>Js</strong>的逻辑层代码</p>
<script></script></li>
<li><p>style部分，主要是样式的填充</p>
<style></style></li>
</ul>
</li>
<li><p>对于一个Vue页面来说，我们只看vue逻辑部分，那么他是由以下几部分构成的</p>
<ul>
<li><code>el</code>节点</li>
<li>data区域：这里是vue数据定义的一个区域，所有的vue数据都从这里来</li>
<li>methods区；这里是大部分的方法都在这里定义，在这里使用</li>
<li>生命周期函数区：包括<code>beforeCreated,created,mounted,destroyed</code>等生命周期函数，这里不多做介绍。</li>
</ul>
</li>
</ol>
</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/03/17/%E6%89%8B%E6%92%95vue%E4%B9%8B%E5%AF%B9%E4%BA%8B%E4%BB%B6%E6%8C%82%E8%BD%BD%E5%92%8C%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/15/flutter%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/03/15/flutter%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="url">flutter基本组件的使用</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-15T20:48:29+08:00">
                2022-03-15
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/15/flutter%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/15/flutter基本组件的使用/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="1-Flutter入口"><a href="#1-Flutter入口" class="headerlink" title="1.Flutter入口"></a>1.Flutter入口</h2><ul>
<li><p>在lib下的main().dart中，使用runApp进行加载</p>
</li>
<li><p>引入包（输入fim快速引入）</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;dart:io&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;package:flutter/material.dart&#x27;</span>;</span><br></pre></td></tr></table></figure>

<p>加载主函数</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> main() &#123;</span><br><span class="line">  runApp(MyApp);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//等价于</span></span><br><span class="line"><span class="keyword">void</span> main()=&gt;runApp(MyAPP())</span><br></pre></td></tr></table></figure></li></ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/03/15/flutter%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/13/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/03/13/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/" itemprop="url">Vue双向绑定底层原理</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-13T19:45:37+08:00">
                2022-03-13
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/13/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/13/Vue双向绑定底层原理/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Vue数据劫持和发布者-订阅者实现双向绑定的原理理解"><a href="#Vue数据劫持和发布者-订阅者实现双向绑定的原理理解" class="headerlink" title="Vue数据劫持和发布者-订阅者实现双向绑定的原理理解"></a>Vue数据劫持和发布者-订阅者实现双向绑定的原理理解</h1><h2 id="1-原生JS双向绑定？"><a href="#1-原生JS双向绑定？" class="headerlink" title="1.原生JS双向绑定？"></a>1.原生JS双向绑定？</h2><h3 id="1-DOM构成"><a href="#1-DOM构成" class="headerlink" title="1.DOM构成"></a>1.DOM构成</h3><ul>
<li>我们都知道，在一个web单文件网页中，有三部分组成，就是所谓的前端三剑客HTML，CSS，JavaScript，而这三个组件分工明确，HTML主要是负责渲染虚拟DOM，就是虚拟文档，通过各种标签，以超文本标记语言的规范，把想要显示的东西显示在一个浏览器的页面上，而CSS就是负责美化，JavaScript是最重要的，也就是灵魂，他赋予了人与数据交互的灵魂。</li>
<li>做个不是那么严谨的比喻就是，HTML的构建就是修筑一座房子，但是这座房子没有装修，只是个框架，毛坯房，没有美感可言。加上CSS的美化，就使房子被装修了，有了玻璃，墙壁等也被粉刷好了，吊顶啥的都做好了。但是此时房子还不能居住，因为房子现在是静态的，没有电，没有水，没办法和房子交互，无法正常生活。直到JavaScript的加入，此时你的房子通了电，通了水，有了灵魂。天冷，你可以开暖气，天热你可以开空调，调节温度，让他达到你自己想要的标准。虽然这个比喻不够恰当，但是大概就是这个意思。</li>
</ul>
<h3 id="2-什么是双向？"><a href="#2-什么是双向？" class="headerlink" title="2.什么是双向？"></a>2.什么是双向？</h3><ul>
<li><p>我们都知道，在一颗虚拟文档树中，所有的节点都是数据来进行支撑和渲染的，比如一个最简单的交互，你需要往一个输入框里面输入我们想要的文本。</p></li></ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/03/13/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/13/flutter%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BAWindows/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/03/13/flutter%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BAWindows/" itemprop="url">flutter开发环境的搭建Windows</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-13T15:46:45+08:00">
                2022-03-13
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/13/flutter%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BAWindows/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/13/flutter开发环境的搭建Windows/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id><a href="#" class="headerlink" title></a><blockquote class="blockquote-center"><p>flutter开发环境的搭建Windows</p>
</blockquote></h1><h2 id="-1"><a href="#-1" class="headerlink" title></a><blockquote class="blockquote-center"><p>在Windows操作系统上搭建Flutter开发环境</p>
</blockquote></h2><h3 id="1-使用镜像"><a href="#1-使用镜像" class="headerlink" title="1.使用镜像"></a>1.使用镜像</h3><ul>
<li><p>由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到用户环境变量中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">export PUB_HOSTED_URL=https://pub.flutter-io.cn</span><br><span class="line">export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn</span><br></pre></td></tr></table></figure>

<p>前者为环境变量的key，后者为环境变量的value，环境变量配置如下图：</p>
<img src="/blogs/2022/03/13/flutter%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BAWindows/ev_path.png" class title="环境变量配置"></li>
</ul>
<h3 id="2-安装Git"><a href="#2-安装Git" class="headerlink" title="2.安装Git"></a>2.安装Git</h3><ul>
<li><p>如果已安装Git for Windows，请确保命令提示符或PowerShell中运行 <code>git</code> 命令，不然在后面运行<code>flutter doctor</code>时将出现<code>Unable to find git in your PATH</code>错误, 此时需要手动添加<code>C:\Program Files\Git\bin</code>至<code>Path</code>系统环境变量中</p></li></ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/03/13/flutter%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BAWindows/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/blogs/page/2/">&lt;i class&#x3D;&quot;fa fa-angle-left&quot;&gt;&lt;&#x2F;i&gt;</a><a class="page-number" href="/blogs/">1</a><a class="page-number" href="/blogs/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/blogs/page/4/">4</a><a class="page-number" href="/blogs/page/5/">5</a><a class="extend next" rel="next" href="/blogs/page/4/">&lt;i class&#x3D;&quot;fa fa-angle-right&quot;&gt;&lt;&#x2F;i&gt;</a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/blogs/images/cat.jpg"
                alt="" />
            
              <p class="site-author-name" itemprop="name"></p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blogs/archives">
              
                  <span class="site-state-item-count">43</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blogs/tags/index.html">
                  <span class="site-state-item-count">10</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://gitee.com/louchaoyy" target="_blank" title="Gitee">
                      
                        <i class="fa fa-fw fa-gitee"></i>Gitee</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="louchao@louchaoyy.cn" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Chaoyxy</span>

  
</div>

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<!--

  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.3</div>
-->




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/blogs/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/blogs/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/blogs/js/src/motion.js?v=5.1.3"></script>



  
  


  <script type="text/javascript" src="/blogs/js/src/affix.js?v=5.1.3"></script>

  <script type="text/javascript" src="/blogs/js/src/schemes/pisces.js?v=5.1.3"></script>



  

  


  <script type="text/javascript" src="/blogs/js/src/bootstrap.js?v=5.1.3"></script>



  


  

    
      <script id="dsq-count-scr" src="https://Chaoyxy.disqus.com/count.js" async></script>
    

    

  




	





  














  





  

  

  

  
  

  

  

  

</body>
</html>
